import { defineComponent } from "vue";
import ColView from "../ColView";
import ButtonView from "../ButtonView";
import RoundInfo from "../RoundInfo";
import { brandInfoProps } from "./types";
import RowView from "../RowView";
import LabelGroup from "../LabelGroup";
import TextView from "../TextView";
import { ILabelProps } from "../Label/types";
import PhoneIcon from "../PhoneIcon";
export default defineComponent({
  name: "",
  props: brandInfoProps,
  setup(_) {
    return () => {
      const renderBottomLabel = () => {
        return (
          <RowView class="justify-between">
            <ColView class="mt-[7px]">
              <LabelGroup data={_.types} />
              <TextView class="mt-[10px]">{_.desc}</TextView>
            </ColView>
            {_.type !== "edit" && <PhoneIcon phone={_.phone} />}
          </RowView>
        );
      };
      return (
        <ColView class="w-full">
          <RoundInfo
            {..._}
            v-slots={{ bottomLabel: renderBottomLabel }}
            rowHeight={67}
            class="brand-info"
          />
          {_.type !== "edit" && (
            <ButtonView
              type="primary"
              block
              class="!h-[44px] mt-[18px]"
              onClick={() => _.onBottomClick && _.onBottomClick()}
            >
              {_.buttonTitle}
            </ButtonView>
          )}
        </ColView>
      );
    };
  },
});
